<template>
  <div>
    <vo-table :data="data.table.data" :cols="data.table.cols" :isTree="true" :isPage="false" :treeConfig="data.table.treeConfig">

        <template #tableForm>
          <tiny-form :model="data.formData" :rules="data.rules"  :inline="true"  style="height: 40px;" label-width="60px"  ref="formRef">
            <tiny-form-item label="模块" >
              <vo-select default select dictCode="sysSpaceList" v-model:value="data.searchData.spaceId" />
              </tiny-form-item>
            <tiny-form-item >
            <tiny-button ghost type="info" @click="getMenu"><vo-icon iconName="search" ></vo-icon>搜索</tiny-button>
            </tiny-form-item>
        </tiny-form>
      </template>

      <template #leftBar>
        <tiny-button-group>
          <tiny-button ghost type="success"  @click="addBtn"><vo-icon iconName="plus1" ></vo-icon>新增</tiny-button>
          <tiny-button ghost type="success" @click="initMenu"><vo-icon iconName="refresh" ></vo-icon>初始化菜单</tiny-button>
        </tiny-button-group>
      </template>
      <template v-slot:iconSolt="{row}">
        <div class="icon-class">
          <vo-icon :iconName="row.menuIcon"></vo-icon>
        </div>

      </template>
      <template v-slot:handleSlot="{row}">
        <tiny-button-group class="ml-4" style="display: inline-flex">
          <tiny-button ghost type="success" size="mini" @click="editBtn(row)">编辑 </tiny-button>
          <tiny-button ghost type="danger" size="mini" @click="delMenu(row)">删除</tiny-button>
        </tiny-button-group>
      </template>
    </vo-table>
    <vo-drawer :params="data.editDilog" :title="data.editDilog.title" v-model:isShow="data.editDilog.isShow">
      <edit-menu :menuData="data.editData" @getMenu="getMenu" :sysSpace="cosSpace" v-model:isShow="data.editDilog.isShow"></edit-menu>
    </vo-drawer>
  </div>
</template>

<script setup>
  import {ref, getCurrentInstance, onMounted, reactive} from 'vue';
  import {Modal, Notify} from '@opentiny/vue';
  import editMenu from './MenuManagerEdit.vue';
  import VoDrawer from '@/components/com/VoDrawer.vue';
  import {cosSystem} from '@/stores/system.js';
  const store = cosSystem();

  const data = reactive({
    editDilog: {title: '', isShow: false, maskClosable: false, params: {}},
    editData: {},
    searchData: {},
    table: {data: [], cols: [], treeConfig:{ children: 'children'}},
  });

  data.table.cols = [
    // {type: 'index'},
    {title: '菜单名称', key: 'menuName', align: 'left', width: 'auto', treeNode: 'true'},
    {title: '菜单编码', key: 'menuCode', align: 'left', width: 'auto'},
    {title: '显示图标', key: 'icon', align: 'center', width: 'auto',slot:"iconSolt"},
    {title: '访问路径', key: 'routerPath', align: 'left', width: 'auto'},
    {title: '组件路径', key: 'filePath', align: 'left', width: 'auto'},
    {title: '排序', key: 'orderNum', align: 'left', width: 'auto'},
    {title: '所在模块', key: 'spaceName', align: 'left', width: 'auto'},
    {
      title: '操作',
      align: 'center',
      slot: 'handleSlot',
    },
  ];
  let {proxy} = getCurrentInstance();
  const getMenu = async () => {
    proxy.$api.menu.querySysMenu(data.searchData).then(res => {
      data.table.data = res; //更新数据
    });
  };
  const delMenu = row => {
    if (row.children) {
      Modal.message({message: '有子菜单，不可删除', status: 'warning'});
    } else {
      Modal.confirm('您确定要删除吗？').then(res => {
        if (res == 'confirm') {
          proxy.$api.menu.deleteMenu(row).then(res => {
            if (res.code != -1) {
              Modal.message({message: res.msg, status: 'success'});
              //处理菜单重置
              store.restMenu();
              getMenu();
            } else {
              Modal.message({message: res.msg, status: 'error'});
            }
          });
        }
      });
    }
  };

  onMounted(() => {
    //菜单查询
    getMenu();
  });
  //初始化菜单路由
  const initMenu = () => {
    Modal.confirm('是否重置菜单').then(res => {
      if (res == 'confirm') {
        //处理菜单重置
        store.restMenu();
      }
    });
  };

  //新增菜单按钮
  const addBtn = () => {
    data.editDilog.isShow = true;
    data.editDilog.title = '菜单编辑';
    data.editDilog.width = '800px';
    // 默认值 不出现这
    data.editData = {
      menuType: '1',
      isStop: '0',
      menuHidden: '0',
      isCache: '0',
    };
  };
  //修改
  const editBtn = row => {
    data.editDilog.isShow = true;
    data.editDilog.title = '菜单编辑';
    data.editDilog.width = '800px';
    data.editData = JSON.parse(JSON.stringify(row));
  };
</script>

<style scoped lang="scss">
  .demo-input .tiny-input {
    width: 250px;
  }
  .icon-class{
    .svg-icon{
      font-size: 20px;
    }
  }
</style>
